*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 超小设备 (手机, 600px 以下屏幕设备) */
@media screen and (max-width: 600px) {
  .box-item{
    width: 100%;
  }
}
/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media screen and (min-width: 600px) {
 .box-item{
    width: 100%;
  }
}

/* 中型设备（平板电脑，768 像素及以上） */
@media screen and (min-width: 768px) {
  .box-item{
    width: 100%;
  }
} 

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media screen and (min-width: 992px) {
  .box-item{
    width: 45%;
  }
} 

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media screen and (min-width: 1200px) {
  .box-item{
    width: 45%;
  }
}